<template>
    <div class="form-group time-group" :style="{'margin-bottom':!upTable?'30px':'17px'}" style="position: relative;">
        <label :class="!upTable ? 'labelSize':'control_up_label'" :style="labelWidth"><span class="required"
                                                                                            v-if="required">*</span>{{title}}：</label>
        <div class="input-append date form_datetime">
            <input class="form-control" :id="id" type="text" v-model="value" :name="name" v-el:input
                   :readonly="readOnly" :style="styles | style-filter upTable" @click="show(showTime)">
            <span class="add-on"><i class="icon-th"></i></span>
        </div>
        <slot></slot>
    </div>
</template>
<style lang="css" src="plugins/bootstrap-datetimepicker/bootstrap-datetimepicker.css"></style>

<style lang="less">
    .form_datetime {
        /*display: inline-table;*/
    }

    .time-group > * {
        display: inline-block;
    }
</style>
<script>
    import 'plugins/bootstrap-datetimepicker/bootstrap-datetimepicker.js'
    import {randomId} from "./general";

    export default {
        data: () => ({
            id: randomId(),
            showTime: true
        }),
        watch: {
            value (v) {
                $(this.$els.input).valid()
                this.$emit('is-change')
            }
        },
        computed: {},
        props: {
            title: {type: String},
            upTable: {type: Boolean, default: false},
            required: {type: Boolean, default: false},
            value: {type: String, default: ""},
            name: String,
            left: {type: String, default: 2},
            disabled: {type: Boolean, default: false},
            styles: {type: String, default: "width:265px;max-width:265px"},
            labelWidth: {type: String, default: ""},
            readOnly: {type: Boolean, default: false}
        },
        ready () {
            $.fn.datetimepicker.dates['zh-CN'] = {
                days: ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六", "星期日"],
                daysShort: ["周日", "周一", "周二", "周三", "周四", "周五", "周六", "周日"],
                daysMin: ["日", "一", "二", "三", "四", "五", "六", "日"],
                months: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"],
                monthsShort: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
                today: "今天",
                suffix: [],
                meridiem: ["上午", "下午"]
            };
        },
        methods: {
            show (e) {
                if (e) {
                    $(this.$els.input).datetimepicker('show')
                } else {
                    if (!$(this.$els.input).is(':focus')) {
                        $(this.$els.input).datetimepicker('hide')
                    }
                }
                this.showTime = !this.showTime
            }
        },
        filters: {
            styleFilter: (value, e) => e ? (value === "width:265px;max-width:265px" ? "width:230px" : value || "") : value
        }
    }
</script>
